<template>
	<view class="toast3d" v-if="showGuide">
		<view class="mask"></view>
		<view class="wrap">
			<view class="content">
				<view class="text intro-text">从这里发布商品，开始赚钱吧</view>
				<image class="arrow" src="/static/wash/arrows@3x.png"></image>
				<view class="confirm-btn-wrap" @click="closeGuide">
					<image class="autoImg" src="/static/wash/btn-wrap.png"></image>
					<view class="text">知道了</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showGuide: false
			}
		},
		methods:{
			closeGuide(){
				this.showGuide = false;
				uni.setStorageSync('newGuide',false);
				uni.showTabBar({});
			}
		},
		mounted(){
			let bol = uni.getStorageSync('newGuide');
			if(bol === ''){
				this.showGuide = true;
				uni.hideTabBar({})
			}else{
				this.showGuide = false;
				uni.showTabBar({});
			}
		},
		watch:{
			showGuide:{
				handler(val){
					if(val){
						uni.hideTabBar({})
					}else{
						uni.showTabBar({});
					}
				},
				immediate:true
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	height: 100%;
	z-index: 111;
	.content {
		width: 100%;
		@include flex_cloumn_center;
		position: absolute;
		bottom: 80rpx;
		.thxc_img{
			@include flex_cloumn_center;
			font-size: 24rpx;
			image{
				width: 100rpx;
				height: 100rpx;
			}
			
		}
		.text {
			color: #fff;
			font-size: 32rpx;
		}
		.intro-text {
			padding: 20rpx 0;
		}
	}
}
.arrow {
	width: 52rpx;
	height: 78rpx;
}
.confirm-btn-wrap {
	width: 256rpx;
	height: 106rpx;
	position: relative;
	margin-top: 160rpx;
	.text {
		@include flex_cloumn_center;
		position: absolute;
		top: 0;
		left: 0;
		width: 256rpx;
		height: 106rpx;
	}
}
</style>
